<template>
  <div class="box-bbb">
    <div class="part">
      <div class="partTitle">
        <div>产品异动</div>
      </div>
      <div class="partContentTop">
        <div class="listBox">
          <div class="outTipsBox" style="justify-content:flex-end;">
            <div class="tipsBox">
              <div class="colorBarBox">
                <div class="redBar"></div>
                <div class="grenBar"></div>
              </div>
              <div>环比周期</div>
            </div>
          </div>
          <div class="nomoreBox" v-if="productData.length <= 0 && !productLoading">
            <img src="~@/assets/noMore.png" alt="">
          </div>
          <div class="loadingBox" v-if="productLoading">
            <i class="el-icon-loading"></i>
            <div>数据加载中</div>
          </div>
          <div class="insideListBox">
            <div class="listItem" v-for="(item, index) in productData" :key="index">
              <div>
                <div class="scenceLabel pointer" @click="selectProduct(item.label)"
                  :style="{ color: selectProductName == item.label ? '#0095fe' : '' }">{{ item.label }}</div>
                <div class="barBg">
                  <div class="numBar" :style="'width:' + item.numWidth + '%;'"></div>
                  <div class="rateBar" :class="item.isUp == 0 ? 'rateGreenBar' : 'rateRedBar'"
                    :style="'width:' + item.rateWidth + '%;'"></div>
                  <div class="rateText" :class="item.isUp == 0 ? 'rateGreenColor' : 'rateRedColor'"
                    :style="'left:' + item.numWidth + '%;'">{{ item.isUp == 0 ? '-' : '+' }}{{ item.rate + '%' }}</div>
                </div>
              </div>
              <div class="scenceNum pointer">{{ item.num }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productData: [],
      productLoading: false,
      selectProductName: '',
    }
  },
  watch: {},
  activated() { },
  created() {
    this.fecthData();
  },
  methods: {
    fecthData() {
      this.productLoading = true;
      let list = []
      let xxxList = [
        {
          "label": "201910-5G畅享129元套餐201910",
          "beforeNum": 2093,
          "afterNum": 969,
          "rate": "-0.5370"
        },
        {
          "label": "201910-5G畅享199元套餐201910",
          "beforeNum": 1267,
          "afterNum": 633,
          "rate": "-0.5004"
        },
        {
          "label": "201910-5G畅享169元套餐201910",
          "beforeNum": 894,
          "afterNum": 435,
          "rate": "-0.5134"
        },
        {
          "label": "202112-星卡29元（2022版）",
          "beforeNum": 822,
          "afterNum": 314,
          "rate": "-0.6180"
        },
        {
          "label": "201910-5G畅享239元套餐201910",
          "beforeNum": 544,
          "afterNum": 267,
          "rate": "-0.5092"
        },
        {
          "label": "201907-5G体验10元融合成员功能费201907",
          "beforeNum": 469,
          "afterNum": 247,
          "rate": "-0.4733"
        },
        {
          "label": "学子包39元_202107",
          "beforeNum": 557,
          "afterNum": 213,
          "rate": "0.6176"
        },
        {
          "label": "201809-天翼畅享20GB（99元）套餐201802",
          "beforeNum": 369,
          "afterNum": 202,
          "rate": "-0.4526"
        },
        {
          "label": "201809-天翼畅享40GB（199元）套餐201802",
          "beforeNum": 340,
          "afterNum": 193,
          "rate": "0.4324"
        },
        {
          "label": "202201-星卡39元（2022版）",
          "beforeNum": 170,
          "afterNum": 113,
          "rate": "-0.3353"
        }
      ]
      // console.log("xxxList===",xxxList);
      // return
      if (xxxList.length > 0) {
        this.productLoading = false;
        xxxList.forEach(e => {
          if (e.rate) {
            e.rate = (Number(e.rate) * 100).toFixed(1)
            // console.log("e.rate===",e.rate);
            if (e.rate < 0) {
              e.rate = e.rate.substring(1)
              // console.log("-------------",e.rate);//取-53.7为53.7
              e.isUp = 0
            } else {
              //  e.rate = e.rate.substring(0,e.rate.length-1)
              e.isUp = 1
            }
          } else {
            e.rate = '0'
          }
          e.num = e.afterNum
          e.numWidth = 0
          e.rateWidth = 0
        })
        list = xxxList
        console.log("list====",list);
        //取最大的num所在的对象为largeNumItem,
        let largeNumItem = list.reduce((a, b) => a.num > b.num ? a : b)
        console.log("largeNumItem===",largeNumItem);
        //以70/最大对象largeNumItem.num,算取最大项所占的比例,左侧部分所占的比例
        let numPer = 70 / largeNumItem.num
        console.log("numPer===",numPer);
        //取最大的rate所在的对象为largeRateItem,
        let largeRateItem = list.reduce((a, b) => Number(a.rate) > Number(b.rate) ? a : b)
        console.log("largeRateItem===",largeRateItem);
        //以70/最大对象largeRateItem.rate,算取最大项所占的比例,右侧部分所占的比例
        let ratePer = 30 / Number(largeRateItem.rate)
        // return
        list.forEach(e => {
          e.numWidth = (e.num * numPer).toFixed(1);//每一项算出左侧所占比例
          console.log("e.numWidth===",e.numWidth);
          e.rateWidth = (Number(e.rate) * ratePer).toFixed(1)//每一项算出右侧所占比例
          // e.rateWidth = e.rateWidth > 30 ? 30:e.rateWidth
        })
      }
      this.productData = list
      console.log("---------------", this.productData);
    },
    // 选择产品
    selectProduct(label) {
      console.log("la-----", label);
    },

  },
  mounted() { }
}
</script>

<style lang='scss' scoped>
::-webkit-scrollbar {
  display: none;
}
.box-bbb{
  width: 31%;
}
.part {
  margin-top: 1.25rem;
}

.partTitle {
  background: url("~@/assets/左右标题.png") no-repeat;
  background-size: 100% 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem 0 3.125rem;
  font-size: 1rem;
}

.partContentTop {
  background: url("~@/assets/左右背景上.png") no-repeat;
  background-size: 100% 100%;
  /* height: 23.75rem; */
  height: 42vh;
  margin-top: .625rem;
}

.listBox {
  height: 100%;
  /* padding: 0 15px 0 25px; */
  overflow-y: hidden;
  position: relative;
}

.pointer {
  cursor: pointer;
}

.insideListBox {
  overflow-y: scroll;
  height: 83%;
  padding: .625rem .9375rem .9375rem 1.5625rem;
}

.outTipsBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3125rem .625rem 0 .625rem;
}

.tipsBox {
  display: flex;
  justify-content: flex-end;
  font-size: .8125rem;
  align-items: center;
  margin-top: .625rem;
}

.colorBarBox {
  display: flex;
  height: .625rem;
  margin-right: .625rem;
}

.redBar {
  width: 2.5rem;
  background: red;
  border-top-left-radius: .625rem;
  border-bottom-left-radius: .625rem;
}

.grenBar {
  width: 2.5rem;
  background: #25af01;
  border-top-right-radius: .625rem;
  border-bottom-right-radius: .625rem;
}

.listItem {
  display: flex;
  position: relative;
  margin-top: 1.25rem;
}

.listItem:nth-child(1) {
  margin-top: 0 !important;
}

.listItem::after {
  content: "";
  position: absolute;
  width: .375rem;
  height: 100%;
  border-radius: .1875rem;
  left: -0.9375rem;
  background: linear-gradient(180deg, #0095fe 0%, #0096fe 100%);
}

.scenceNum {
  color: #0068ff;
  height: 100%;
  display: flex;
  align-items: flex-end;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-left: .625rem;
  margin-top: 1rem;
}

.rateText {
  position: absolute;
  bottom: -0.9375rem;
  font-size: .8125rem;
}

.rateBar {
  border-top-right-radius: .625rem;
  border-bottom-right-radius: .625rem;
  /* width: 100px; */
  width: 30%;
}

.numBar {
  background: linear-gradient(90deg, #61bffe 0%, #5257d5 100%);
  /* width: 150px; */
  width: 70%;
  border-top-left-radius: .625rem;
  border-bottom-left-radius: .625rem;
}

.barBg {
  width: 25vw;
  /* width: 340px; */
  background: #cde2fb;
  height: .625rem;
  border-radius: .625rem;
  margin-top: .375rem;
  display: flex;
  position: relative;
}

.rateRedColor {
  color: red;
}

.rateGreenColor {
  color: #25af01;
}

.rateRedBar {
  background: red;
}

.rateGreenBar {
  background: #25af01;
}

.loadingBox {
  font-size: 1rem;
  color: #0096fe;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}
.nomoreBox{
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nomoreBox img{
  width: 12.5rem;
   
  margin: 0 auto;
}
</style>
